<template>
  <div class="bookrank">
    <div class="box">
      <div class="header">
        <slot></slot>
        <!-- 插槽内容 默认-->
        <!-- <h3>
          热门小说 <span>起点编辑推荐</span>
        </h3> -->
        <!-- <div class="more">
          更多<span class="iconfont icon-arrow-right-"></span>
        </div> -->
      </div>
      <slot name="tab"></slot>
      <!-- 插槽内容 tab -->
      <!-- <div class="rank_navs">
        <li class="active">热销榜</li>
        <li>风云榜</li>
        <li>签约榜</li>
        <li>推荐榜</li>
      </div> -->
      <div class="content">
        <div class="ul">
          <li
            v-for="(item, index) in data[gender]"
            :key="index"
            @click="gotoDetails('details', { id: item._id })"
          >
            <span v-if="show">
              <em class="iconfont icon-paihangbang"></em>
              <em>TOP{{ index + 1 }}</em>
            </span>
            <img :src="item.cover | imgUrl" />
            <p class="name">
              {{ item.title }}
            </p>
            <p class="author">
              {{ item.author }}
            </p>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    gotoDetails(path, params) {
      this.$router.push({
        path: `/${path}`,
        query: { ...params },
      });
    },
  },
  computed: {
    gender() {
      return this.$store.state.ismale;
    },
  },
  props: ["data", "show"], // show是左上角的图标显示隐藏
  filters: {
    imgUrl(url) {
      if (url) {
        return "http://statics.zhuishushenqi.com" + url;
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bookrank {
  padding-top: 0.46875rem;
  background-color: white;
}
.box {
  padding: 0 0.46875rem;
  padding-bottom: 0;
  background-color: white;
  .header {
    border-left: 2.5px solid #ed424b;
    text-indent: 8px;
    position: relative;
    h3 {
      font-family: "宋体";
      font-weight: 600;
      font-size: 0.390625rem;
      position: relative;
      margin: 0 0 0.390625rem 0;
      span {
        font-size: 0.34375rem;
        color: #777;
        font-weight: normal;
        vertical-align: botto;
      }
    }
    .more {
      // 更多
      font-size: 0.375rem;
      color: #777;
      position: absolute;
      right: 0;
      top: 0;
      span {
        margin-left: 0.15625rem;
      }
    }
  }
  // 小tab
  .rank_navs {
    display: flex;
    width: 100%;
    // margin: 0.390625rem 0;
    li {
      flex: 1;
      font-size: 0.375rem;
      width: 25%;
      text-align: center;
      border: 1px solid #ed424b;
      border-left: none;
      padding: 0.15625rem 0;
      color: #ed424b;
      &:nth-child(1) {
        border-left: 1px solid #ed424b;
        border-radius: 0.15625rem 0 0 0.15625rem;
      }
      &:last-child {
        border-radius: 0 0.15625rem 0.15625rem 0;
      }
      &.active {
        color: white;
        background-color: #ed424b;
      }
    }
  }
  .content {
    margin-top: 0.46875rem;
    width: 100%;
    overflow: scroll;
    border-bottom: 2px solid #f6f7f9;
    // 隐藏滚动条
    // Chrome和Safari
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    // ie10+
    -ms-overflow-style: none;
    // firebox
    overflow: -moz-scrollbars-none;
    .ul {
      display: flex;
      li {
        flex: 0 0 1.71875rem;
        margin-right: 20px;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          height: auto;
        }
        p {
          font-size: 0.34375rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          &.name {
            -webkit-line-clamp: 2;
            line-clamp: 2;
          }
          &.author {
            -webkit-line-clamp: 1;
            line-clamp: 1;
          }
        }
        span {
          // 小tab左上角样式
          position: absolute;
          transform: rotate(-45deg);
          left: -0.795rem;
          top: -0.6125rem;
          em {
            width: 1.5625rem;
            background-color: #ed424b;
            font-size: 0.234375rem;
            color: white;
            display: block;
            text-align: center;
            padding: 0.3125rem 0 0 0;
            &:nth-child(1) {
              position: relative;
              bottom: -0.3125rem;
            }
          }
        }
        // 后面的样式
        &:nth-child(2) {
          span {
            em {
              background-color: #f0643a;
            }
          }
        }
        &:nth-child(3) {
          span {
            em {
              background-color: #f0c53a;
            }
          }
        }
        &:nth-child(n + 4) {
          span {
            em {
              background-color: #969ba3;
            }
          }
        }
      }
    }
  }
}
</style>